<template>
  <div class="role-main">
    <div class="role-left">
      <LeftManage @click-row="handleClickRow" ref="manageRef"></LeftManage>
    </div>
    <div class="role-right">
      <RightList :roleDatas="roleDatas" @reFresh="reFresh"></RightList>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import LeftManage from './components/LeftManage.vue'
import RightList from './components/RightList.vue'
import { IroleData } from './config/menuRole'

const roleDatas = ref<IroleData>()
const handleClickRow = (item: IroleData) => {
  roleDatas.value = item
}

/**
 * @desc:保存dialog
 */
const manageRef = ref<InstanceType<typeof LeftManage>>()
const reFresh = () => {
  manageRef.value?.getData()
}
</script>

<style lang="less" scoped>
.role-main {
  width: 100%;
  display: flex;
  height: 100%;
  .role-left,
  .role-right {
    padding: 10px;
    width: 50%;
    background: #fff;
  }
  .role-right {
    margin-left: 10px;
  }
}
</style>
